﻿*{
	margin: auto;
	padding: 0px;
}

header{
	width: 100%;
	height: 660px;
	position: relative;
	text-align: center;
	top: 0;
	z-index: 1;
	background-color: #00BCD4; 
}

header figure > img{
	width: 100%;
	height: 660px;
}


.content figure > img{
	width: 100%;
	height: 660px;
}
nav{
	top: 540px;
	left: 0;
	right: 0;
	margin-bottom: 0px;
    width:100%;
    max-width: 100%;
    min-width: 50%;
    overflow: hidden;
    position: fixed;
    display: block;
    background-color: transparent;
}

nav ul{
		list-style:none;
}

nav li{
   list-style: none;
   position:relative; /* importante, para que el submenu tome la posición correcta*/
}

nav > ul > li > ul> li a{
	display: block;
}

nav ul li:hover ul{
	display: inline-block;
}


nav > ul{
	display: table;
	width: 100%;
    margin: auto;
    background-color: transparent;
}

nav > ul li{
	width: 80px;
	height: 80px;
	margin: 14px;
	display: inline-block;
	background-color: #fff;
	border-radius: 60%;
	z-index: 10;
-webkit-box-shadow: -2px -2px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: -2px -2px 5px 0px rgba(0,0,0,0.75);
box-shadow: -2px -2px 5px 0px rgba(0,0,0,0.75);

}
nav > ul li:hover{
	background-color: #ccc;

}

nav > ul li a img{	
	padding: 0;
	margin: 0;
	position: relative;
	margin-top: 16px;
}

nav > ul > li > a > span > img{
	width: 40px;
	height: 40px;
}

/* clases de iconos  */

#a:hover{
	background-color: red;
}
#b:hover{
	background-color: blue;
}
#c:hover{
	background-color: #ccc;
}
#d:hover{
	background-color: #3d3;
}
#e:hover{
	background-color: green;
}

.content{
	width: 100%;
	height: 660px;
	background-color: #91E871;
}




footer{
	width: 100%;
	height: 560px;
	bottom: 0px;
	background-color: #ccc;
	position: relative;
	text-align: center;
	font-size: 21px;
}
